<template>
	<view class="data-center">
		<view class="top">
			<view class="sday">
				近七日内
			</view>
			<view class="information">
				<view class="infoitem">
					<view class="info-top">
						{{dataCenter.rooms}}
					</view>
					<view class="info-down">
						房间数
					</view>
				</view>
				<view class="infoitem">
					<view class="info-top">
						{{dataCenter.checkIns}}
					</view>
					<view class="info-down">
						入住数
					</view>
				</view>
				<view class="infoitem">
					<view class="info-top">
						{{dataCenter.orders}}
					</view>
					<view class="info-down">
						订单数
					</view>
				</view>
			</view>
		</view>
		<!-- 数据 -->
		<view class="Sales">
			<view class="sday">
				近七日内销售情况
			</view>
			<!-- 图形化 -->
			<view class="chart">
				<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
			</view>
			<view class="datarmation">
				<view class="dataitem" style="background-color: #91CB74;">
					<view class="data-top">
						300
					</view>
					<view class="data-down">
						饮料
					</view>
				</view>
				<view class="dataitem" style="background-color: #FAC858;">
					<view class="data-top">
						200
					</view>
					<view class="data-down">
						纸巾
					</view>
				</view>
				<view class="dataitem" style="background-color: #EE6666;">
					<view class="data-top">
						180
					</view>
					<view class="data-down">
						零食
					</view>
				</view>
				<view class="dataitem" style="background-color: #1890FF;">
					<view class="data-top">
						500
					</view>
					<view class="data-down">
						其他
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getData
	} from '@/api/datacenter.js'
	export default {
		data() {
			return {
				//echarts
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false
						}
					},
					legend: {
						show: false
					}
				},
				//数据中心,
				dataCenter: [],
			}
		},
		onShow() {
			this.getServerData()
			this.loadData()
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "其他",
								"value": 50,
								"labelText": "其他:50"
							}, {
								"name": "饮料",
								"value": 30,
								"labelText": "饮料:30"
							}, {
								"name": "纸巾",
								"value": 20,
								"labelText": "纸巾:20"
							}, {
								"name": "零食",
								"value": 18,
								"labelText": "零食:18"
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 获取数据
			loadData() {
				console.log('方法');
				let prams = {
					endTime: '', //结束时间
					startTime: '', //开始时间
					statisticsType: 1 //类型
				}
				getData(prams).then(res => {
					console.log('res', res);
					if (res.code == 200) {
						this.dataCenter = res.data.statistics
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.data-center {
		background: linear-gradient(#FFE1BB, #FFF6EC);
		height: 100vh;
		width: 100vw;

		.top {
			background-color: #FFF0DF;
			width: 710rpx;
			height: 280rpx;
			margin: 0 auto;
			box-shadow: 0 0 10rpx 2rpx #E4CEB0;
			border-radius: 15rpx;
			padding: 30rpx 25rpx;

			.sday {
				font-size: 38rpx;
				margin-bottom: 40rpx;
			}

			.information {
				display: flex;
				justify-content: space-between;

				.infoitem {
					height: 120rpx;
					width: 120rpx;
					background-color: #fff;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.info-top {
						font-size: 45rpx;
						margin-bottom: 5rpx;
					}

					.info-down {
						font-size: 25rpx;
					}
				}
			}
		}

		.Sales {
			background-color: #FFF0DF;
			width: 710rpx;
			height: 680rpx;
			margin: 20rpx auto;
			box-shadow: 0 0 10rpx 2rpx #E4CEB0;
			border-radius: 15rpx;
			padding: 30rpx 25rpx;

			.sday {
				font-size: 38rpx;
			}

			.chart {
				width: 600rpx;
				height: 450rpx;
				margin: 0 auto;
			}

			.datarmation {
				display: flex;
				justify-content: space-between;
				color: #fff;

				.dataitem {
					height: 120rpx;
					width: 120rpx;
					background-color: #fff;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.data-top {
						font-size: 45rpx;
						margin-bottom: 5rpx;
					}

					.data-down {
						font-size: 25rpx;
					}
				}
			}
		}
	}
</style>